<template>
	<view class="Index">
		<view class="title" v-if="props.cardType == 'index'">{{props.title}}</view>
		<!-- 瀑布流布局列表 -->
		<view class="pubuBox">
			<view class="pubuItem">
				<view class="item-masonry" v-for="(item, index) in comList" :key="index"
					@click="$goUrl(`/subPackage/teacher/caseDetail?id=${index}`)">
					<image :src="item.img" mode="widthFix"></image>
					<view class="listtitle">
						<!-- 这是没有高度的父盒子（下半部分） -->
						<view class="listtitle1">{{ item.name }}</view>
						<view class="listtitle3 dispaly-center" v-if="props.showUser">
							<view class="avatar">
								<image :src="item.img" mode="aspectFill"></image>
							</view>
							<view class="name">balala</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const props = defineProps({
		cardType: {
			type: String,
			default: 'index'
		},
		title: {
			type: String,
			default: '风格案列'
		},
		showUser: {
			type: Boolean,
			default: true
		}
	})
	console.log(props.cardType)
	const comList = ref([{
			img: "https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6",
			name: '商品的名称，可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
			commdityPrice: 100
		}, {
			img: 'https://img2.baidu.com/it/u=1814268193,3619863984&amp;fm=253&amp;app=138&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=d6764859a9740bb4aead7703daa61876',
			name: '商品名称会在超出两行时候自动折叠',
			commdityPrice: 100
		},
		{
			img: 'https://img0.baidu.com/it/u=1604010673,2427861166&amp;fm=253&amp;app=138&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=2e255208580c0570167a800344d3aa59',
			name: '只有一行标题时高度为39',
			commdityPrice: 100
		}, {
			img: 'https://img0.baidu.com/it/u=2627496060,1933351908&amp;fm=253&amp;app=138&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=fd7a89ad586d338543b6916df7083e4f',
			name: '具体样式您可以自定义',
			commdityPrice: 100
		}, {
			img: 'https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6',
			name: 'vue的H5页面也是如此使用',
			commdityPrice: 100
		}, {
			img: 'https://img2.baidu.com/it/u=1814268193,3619863984&amp;fm=253&amp;app=138&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=d6764859a9740bb4aead7703daa61876',
			name: '商品名称会在超出两行时候自动折叠',
			commdityPrice: 100
		}
	])
</script>

<style scoped="scoped" lang="scss">
	//瀑布流
	page {
		background-color: #eee;
		height: 100%;
	}

	.pubuBox {}

	.pubuItem {
		column-count: 2;
		column-gap: 20rpx;
	}

	.item-masonry {
		box-sizing: border-box;
		border-radius: 15rpx;
		overflow: hidden;
		background-color: #f9f9f9;
		break-inside: avoid;
		/*避免在元素内部插入分页符*/
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.item-masonry image {
		width: 100%;
		border-radius: 20rpx;
	}

	.listtitle {
		font-size: 24rpx;
		padding-bottom: 22rpx;

		.listtitle1 {
			line-height: 39rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			min-height: 39rpx;
			max-height: 78rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 28rpx;
			color: #020121;
		}

		.listtitle2 {
			color: #ff0000;
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: bold;
			padding-top: 22rpx;

			.listtitle2son {
				font-size: 32rpx;
			}
		}

		.listtitle3 {
			font-size: 28rpx;
			color: #909399;
			line-height: 32rpx;
			padding-top: 22rpx;

			.avatar {
				image {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}

			.name {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: #020121;
			}
		}
	}

	.Index {
		width: 100%;
		height: 100%;

		.title {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 900;
			font-size: 32rpx;
			color: #020121;
			padding-bottom: 24rpx;
		}
	}
</style>